<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="./css/index.css">
 </head>
<body>
  <div class="container">
    <!--头部-->
    <div class="header">
      <div class="content">
        <!--logo-->
        <h1>
          <a href=""><img src="./images/logo.png" alt=""></a>
        </h1>
        <!--导航-->
        <div class="header-nav">
          <ul>
            <li><a href="">首页</a></li>
            <li><a href="">课程</a></li>
            <li><a href="">职业规划</a></li>
          </ul>
        </div>
        <!--搜索框-->
        <div class="search">
          <input type="text" placeholder="请输入搜索内容">
          <button></button>
        </div>
        <!--用户-->
        <div class="user">
          <img src="./images/user.png" alt="">
          <span>qq-leishu</span>
        </div>
      </div>

    </div>
    <!--导航-->
    <div class="banner">
      <div class="banner-img">
        <div class="left">
          <ul>
            <li><a href="">前端开发 <span>></span></a></li>
            <li><a href="">后端开发 <span>></span></a></li>
            <li><a href="">移动开发 <span>></span></a></li>
            <li><a href="">人工智能 <span>></span></a></li>
            <li><a href="">商业预测 <span>></span></a></li>
            <li><a href="">云计算&大数据 <span>></span></a></li>
            <li><a href="">运维&从维护 <span>></span></a></li>
            <li><a href="">UI设计 <span>></span></a></li>
            <li><a href="">产品 <span>></span></a></li>
          </ul>
        </div>
        <div class="right">
          <div class="title">
            <h2>我的课程表</h2>
          </div>
          <div class="context">
            <dl>
              <dt>
                继续学习 程序语言设计
              </dt>
              <dd>
                正在学习-使用对象
              </dd>
            </dl>
            <dl>
              <dt>
                继续学习 程序语言设计
              </dt>
              <dd>
                正在学习-使用对象
              </dd>
            </dl>
            <dl>
              <dt>
                继续学习 程序语言设计
              </dt>
              <dd>
                正在学习-使用对象
              </dd>
            </dl>
          </div>
          <div class="course">
            <a href="">全部课程</a>
          </div>
        </div>
      </div>
    </div>
    <!--推荐导航-->
    <div class="recommend-nav">
      <ul>
        <li><a>精品推荐</a></li>
        <li><a href="">JQuery</a></li>
        <li><a href="">Spark</a></li>
        <li><a href="">MySQL</a></li>
        <li><a href="">JavaWeb</a></li>
        <li><a href="">MySQL</a></li>
        <li><a href="">JavaWeb</a></li>
        <li><a href="">修改兴趣</a></li>
      </ul>
    </div>
    <!--精品推荐-->
    <div class="recommend">
      <h4>精品推荐</h4>
      <h6><a href="">查看更多</a></h6>
      <!--商品-->
      <div class="goods">
        <div class="goods-item">
          <img src="./images/bottom01.jpg" alt="">
        </div>
        <div class="goods-item">
          <img src="./images/bottom02.jpg" alt="">
        </div>
        <div class="goods-item">
          <img src="./images/bottom03.jpg" alt="">
        </div>
        <div class="goods-item">
          <img src="./images/bottom04.jpg" alt="">
        </div>
        <div class="goods-item">
          <img src="./images/bottom02.jpg" alt="">
        </div>
        <div class="goods-item">
          <img src="./images/bottom04.jpg" alt="">
        </div>
        <div class="goods-item">
          <img src="./images/bottom01.jpg" alt="">
        </div>
        <div class="goods-item">
          <img src="./images/bottom04.jpg" alt="">
        </div>
        <div class="goods-item">
          <img src="./images/bottom03.jpg" alt="">
        </div>
        <div class="goods-item">
          <img src="./images/bottom02.jpg" alt="">
        </div>
      </div>
    </div>
    <!--编程入门-->
    <div class="recommend1">
      <h4>编程入门</h4>
      <ul class="common-ul-level">
        <li><a href="">热门</a></li>
        <li><a href="">初级</a></li>
        <li><a href="">中级</a></li>
        <li><a href="">高级</a></li>
      </ul>
      <h6><a href="">查看更多</a></h6>
      <!--左边-->
      <div class="main-left">
        <img src="./images/left.jpg" alt="">
      </div>
      <!--右边-->
      <div class="main-right">
        <img src="./images/top.jpg" alt="">
        <div class="goods">
          <div class="goods-item">
            <img src="./images/bottom01.jpg" alt="">
          </div>
          <div class="goods-item">
            <img src="./images/bottom02.jpg" alt="">
          </div>
          <div class="goods-item">
            <img src="./images/bottom03.jpg" alt="">
          </div>
          <div class="goods-item">
            <img src="./images/bottom04.jpg" alt="">
          </div>
        </div>
      </div>
    </div>
    <!--数据分析师-->
    <div class="recommend1" >
      <h4>数据分析师</h4>
      <ul class="common-ul-level">
        <li><a href="">热门</a></li>
        <li><a href="">初级</a></li>
        <li><a href="">中级</a></li>
        <li><a href="">高级</a></li>
      </ul>
      <h6><a href="">查看更多</a></h6>
      <!--左边-->
      <div class="main-left">
        <img src="./images/left.jpg" alt="">
      </div>
      <!--右边-->
      <div class="main-right">
        <img src="./images/top.jpg" alt="">
        <div class="goods">
          <div class="goods-item">
            <img src="./images/bottom01.jpg" alt="">
          </div>
          <div class="goods-item">
            <img src="./images/bottom02.jpg" alt="">
          </div>
          <div class="goods-item">
            <img src="./images/bottom03.jpg" alt="">
          </div>
          <div class="goods-item">
            <img src="./images/bottom04.jpg" alt="">
          </div>
        </div>
      </div>
    </div>
    <!--机器学习工程师-->
    <div class="recommend">
      <h4>机器学习工程师</h4>
      <ul class="common-ul-level">
        <li><a href="">热门</a></li>
        <li><a href="">初级</a></li>
        <li><a href="">中级</a></li>
        <li><a href="">高级</a></li>
      </ul>
      <h6><a href="">查看更多</a></h6>
      <!--商品-->
      <div class="goods">
        <div class="goods-item">
          <img src="./images/bottom01.jpg" alt="">
        </div>
        <div class="goods-item">
          <img src="./images/bottom02.jpg" alt="">
        </div>
        <div class="goods-item">
          <img src="./images/bottom03.jpg" alt="">
        </div>
        <div class="goods-item">
          <img src="./images/bottom04.jpg" alt="">
        </div>
        <div class="goods-item">
          <img src="./images/bottom02.jpg" alt="">
        </div>
      </div>
    </div>
    <!--前端开发工程师-->
    <div class="recommend">
      <h4>前端开发工程师</h4>
      <ul class="common-ul-level">
        <li><a href="">热门</a></li>
        <li><a href="">初级</a></li>
        <li><a href="">中级</a></li>
        <li><a href="">高级</a></li>
      </ul>
      <h6><a href="">查看更多</a></h6>
      <!--商品-->
      <div class="goods">
        <div class="goods-item">
          <img src="./images/bottom01.jpg" alt="">
        </div>
        <div class="goods-item">
          <img src="./images/bottom02.jpg" alt="">
        </div>
        <div class="goods-item">
          <img src="./images/bottom03.jpg" alt="">
        </div>
        <div class="goods-item">
          <img src="./images/bottom04.jpg" alt="">
        </div>
        <div class="goods-item">
          <img src="./images/bottom02.jpg" alt="">
        </div>
      </div>
    </div>
    <!--底部-->
    <div class="footer">
      <div class="context">
        <div class="main-left">
          <img src="./images/logo.png " alt="">
          <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
            © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
          <a href="">下载APP</a>
        </div>
        <div class="main-right">
          <ul>
            <li><a href="">关于学成网</a></li>
            <li><a href="">关于</a></li>
            <li><a href="">管理团队</a></li>
            <li><a href="">工作机会</a></li>
            <li><a href="">客户服务</a></li>
            <li><a href="">帮助</a></li>
          </ul>
          <ul>
            <li><a href="">新手指南</a></li>
            <li><a href="">如何注册</a></li>
            <li><a href="">如何选课</a></li>
            <li><a href="">如何拿到毕业证</a></li>
            <li><a href="">学分是什么</a></li>
            <li><a href="">考试未通过怎么办</a></li>
          </ul>
          <ul>
            <li><a href="">合作伙伴</a></li>
            <li><a href="">合作伙伴</a></li>
            <li><a href="">合作导师</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
